<template>
  <div>
   
    <img src="../../../assets/images/能力目录.png" width="100%">
    <div class="capability-nav">
      <div class="nav-first">服务目录:</div>
      <div class="divlink" @click="changecard(5)" :class="[cardall === true ? 'active' : 'divlink']">
        <div class="active-div"></div>全部
      </div>
      <div class="divlink" @click="changecard(1)" :class="[changeTab === 1 ? 'active' : 'divlink']">
        <div class="active-div"></div>能力分类1
      </div>
      <div class="divlink" @click="changecard(2)" :class="[changeTab === 2 ? 'active' : 'divlink']">
        <div class="active-div"></div>能力分类2
      </div>
      <div class="divlink" @click="changecard(3)" :class="[changeTab === 3 ? 'active' : 'divlink']">
        <div class="active-div"></div>能力分类3
      </div>
      <div class="divlink" @click="changecard(4)" :class="[changeTab === 4 ? 'active' : 'divlink']">
        <div class="active-div"></div>能力分类4
      </div>

      <el-input placeholder="请输入内容" class="input-with-select">
        <i slot="prefix" class="el-icon-search search"></i>
      </el-input>

    </div>

    <div class="capabody">
      <div class="cardbody">
        <div v-for="(card, index) in cardList" :key="index" 
          @click="goDeail(card.severID, card.servername, card.icon, card.bcolor, card.introduce, card.useNumber, card.viewNumber)">
          <CapabilityCard :card="card" v-show="cardall === true ? cardall : (card.category == changeTab)">
          </CapabilityCard>
        </div>
        <!-- <div v-for="(card, index) in cardList" :key="index" @click="goDeail">
          <CapabilityCard :card="card" v-show="cardall"></CapabilityCard>
        </div> -->
      </div>
    </div>

    <!-- <div class="footer">
      <img src="../../../assets/images/foot_bj2.png">
      <div class="foot">
        <div>
          <router-link to="">
            <h3>快速入口</h3>
          </router-link>
          <router-link to="">
            <p>新手专区</p>
          </router-link>
          <router-link to="">
            <p>了解系统</p>
          </router-link>
          <router-link to="">
            <p>使用指引</p>
          </router-link>
          <router-link to="">
            <p>能力目录</p>
          </router-link>
          <router-link to="">
            <p>开发资源</p>
          </router-link>
          <router-link to="">
            <p>在线测试</p>
          </router-link>
        </div>
        <div>
          <router-link to="">
            <h3>友情链接</h3>
          </router-link>
          <router-link to="">
            <p>江西教育网</p>
          </router-link>
          <router-link to="">
            <p>扶贫系统</p>
          </router-link>
          <router-link to="">
            <p>终身学习帐号平台</p>
          </router-link>
          <router-link to="">
            <p>厅管理门户</p>
          </router-link>
          <router-link to="">
            <p>夸校选课平台</p>
          </router-link>
          <router-link to="">
            <p>综合素质评价平台</p>
          </router-link>
        </div>
        <div>
          <router-link to="">
            <h3>关于我们</h3>
          </router-link>
          <router-link to="">
            <p>关注微信公众号</p>
          </router-link>
          <router-link to="">
            <p>QQ号</p>
          </router-link>
          <router-link to="">
            <p>联系方式</p>
          </router-link>
          <router-link to="">
            <p>地址</p>
          </router-link>
          <router-link to="">
            <p>邮箱</p>
          </router-link>
        </div>
        <div>
          <router-link to="">
            <h3>客户服务</h3>
          </router-link>
          <router-link to="">
            <p>咨询与投诉</p>
          </router-link>
        </div>
      </div>
    </div> -->
  </div>



</template>
<script>
import { getCapaList } from '../../../api/capa'
import CapabilityCard from './components/capability/index.vue'
export default {
  name: 'capability',
  components: {
    CapabilityCard
  },
  data() {
    return {
      active: 0,
      active1: 1,
      changeTab: 5,
      tabcard: 0,
      cardall: true,
      cardList: []



      // { span: '能力分类4', title: '部门管理', icon: 'capaone', bcolor: 'rgb(7, 153, 254)', number: '1496', look: '4203', cid: 4 },
      // { span: '能力分类3', title: '成绩数据查询', icon: 'capatwo', bcolor: 'rgb(73, 208, 168)', number: '1496', look: '4203', cid: 3 },
      // { span: '能力分类1', title: '教师信息查询', icon: 'capathree', bcolor: 'rgb(208, 120, 255)', number: '1496', look: '4203', cid: 1 },
      // { span: '能力分类2', title: '家长信息查询', icon: 'capafour', bcolor: 'rgb(255, 195, 89)', number: '1496', look: '4203', cid: 2 },
      // { span: '能力分类1', title: '部门管理', icon: 'capaone', bcolor: 'rgb(208, 120, 255)', number: '1496', look: '4203', cid: 1 },
      // { span: '能力分类2', title: '成绩数据查询', icon: 'capatwo', bcolor: 'rgb(255, 195, 89)', number: '1496', look: '4203', cid: 2 },
      // { span: '能力分类4', title: '教师信息查询', icon: 'capathree', bcolor: 'rgb(7, 153, 254)', number: '1496', look: '4203', cid: 4 },
      // { span: '能力分类3', title: '家长信息查询', icon: 'capafour', bcolor: 'rgb(73, 208, 168)', number: '1496', look: '4203', cid: 3 },
      // { span: '能力分类3', title: '部门管理', icon: 'capaone', bcolor: 'rgb(73, 208, 168)', number: '1496', look: '4203', cid: 3 },
      // { span: '能力分类4', title: '成绩数据查询', icon: 'capatwo', bcolor: 'rgb(7, 153, 254)', number: '1496', look: '4203', cid: 4 },
      // { span: '能力分类2', title: '教师信息查询', icon: 'capathree', bcolor: 'rgb(255, 195, 89)', number: '1496', look: '4203', cid: 2 },
      // { span: '能力分类1', title: '家长信息查询', icon: 'capafour', bcolor: 'rgb(208, 120, 255)', number: '1496', look: '4203', cid: 1 },
      // { span: '能力分类2', title: '部门管理', icon: 'capaone', bcolor: 'rgb(255, 195, 89)', number: '1496', look: '4203', cid: 2 },
      // { span: '能力分类1', title: '成绩数据查询', icon: 'capatwo', bcolor: 'rgb(208, 120, 255)', number: '1496', look: '4203', cid: 1 },
      // { span: '能力分类3', title: '教师信息查询', icon: 'capathree', bcolor: 'rgb(73, 208, 168)', number: '1496', look: '4203', cid: 3 },
      // { span: '能力分类4', title: '家长信息查询', icon: 'capafour', bcolor: 'rgb(7, 153, 254)', number: '1496', look: '4203', cid: 4 },


    }

  },
  created() {
    this.getList();
  },
  methods: {
   
    changecard(em) {
      this.changeTab = em
      if (this.changeTab == 5) {
        this.cardall = true
        this.tabcard = 0

      }
      else {
        this.tabcard = this.changeTab
        this.cardall = false

      }
    },
    goDeail(id, name, icon, color, introduce, use, view) {
      this.$router.push({
        path: `/home/detail/:id`,
        query: {
          id: id,
          color: color,
          name: name,
          icon: icon,
          introduce: introduce,
          use: use,
          view: view


        }
      })
    },

    getList() {
      this.loading = true
      getCapaList(this.cardList).then(response => {
        // this.cardList.cid= response.data.category
        this.cardList = response.data
      })
    }
  },mounted(){
   
  }

}
</script>

<style scoped lang="scss">
img {
  margin: 0;
}

.cpTop {
  height: 270px;
  width: 100%;

}
// .position{
//     transform: rotate(0deg);
//     z-index: 999;

//     &:hover{
//     transform: rotate(20deg);
//     z-index: 999;
// }
// }
.capability-nav {
  display: flex;
  height: 50px;
  width: 100%;
  min-width: 1500px;
  line-height: 50px;
  background-color: rgb(238, 238, 238);
  margin: -5px;
  box-shadow: 0px 1px 0 rgb(189, 189, 189);

  .nav-first {
    margin-left: 12%;
    min-width: 90px;
  }

  .divlink {
    min-width: 100px;
    text-align: center;
    position: relative;
    width: 6%;

  }

  .el-input {
    width: 400px;
    margin-left: 15%;
  }

  .search {
    font-size: 25px;
    font-weight: 600;
    margin-left: 350px;
    margin-top: 12px;
  }
}


.active {
  background-color: rgb(7, 153, 254);
  color: white;
  transition: 0.5s;

  .active-div {
    transition: 0.5s;
    display: block;
    content: "";
    position: absolute;
    top: 50px;
    left: 40%;
    // left: -60px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgb(7, 153, 254);
  }
}

.capabody {
  width: 100%;
  // margin:auto;


  .cardbody {
    width: 1400px;
    display: flex;
    flex-flow: wrap;
    margin: 50px auto 50px auto;


  }

}

// .footer {
//   margin-top: 50px;
//   width: 100%;
//   background-color: rgb(239, 249, 250);
//   height: 350px;

//   img {
//     width: 100%;
//     height: 20px;

//   }

//   .foot {
//     display: flex;
//     justify-self: center;
//     width: 100%;

//     div {
//       width: 22%;
//       text-align: center;
//       padding-left: 270px;
//       box-sizing: border-box;

//       h3 {
//         text-align: left;
//       }

//       p {
//         text-align: left;
//         width: 170px;
//         font-size: 15px;
//       }

//       &:hover {
//         color: rgb(7, 153, 254);
//       }
//     }


//   }

// }
</style>